<template>
   <el-container>
        <el-main>
          <div class="top" @click="reback">
            <span class="el-icon-arrow-left"></span> 
            <span>商品详情</span>
          </div>
          <img :src='"static/images/"+$store.state.item.product_p' alt="">
          <ul>
            <li>{{$store.state.item.name}}</li>
            <li><span>分享</span></li>
            <li>
              <div>
                <span>￥{{$store.state.item.newprice}}</span>
                <span>￥{{$store.state.item.price}}</span>
              </div>
            </li>
          </ul>
        </el-main>
     <el-main>
        <div class="details">
            <p>图文详情</p>
            <div>{{$store.state.item.desc}}</div>
        </div>
     </el-main>
     <el-footer>
       <ul>
         <li><span  class="el-icon-s-home"></span><span>首页</span></li>
         <li><span class="el-icon-headset"></span><span>客服</span></li>
         <li><span class="el-icon-shopping-cart-2"></span><span>购物车</span></li>
         <li><button>加入购物车</button></li>
         <li><button style="background-color: #ff4716;" @click="buy">立即购买</button></li>
       </ul>
     </el-footer>
     
   </el-container>
</template>
<script>

export default {
 
  data(){
    return {
     
    }
  },
  methods:{
    reback(){//返回上一页
      this.$router.go(-1);
    },
    buy(){//加入购物车

    }
  },
  created(){
    console.log(this.$store.state.item);
  }
}
</script>
<style lang="scss" scoped>
.el-container{
  background-color: #f0f0f0;
}
    .el-main:nth-child(1){
      background-color: #fff;
     padding:0 !important;
     img{
        width: 100%;
        height: 260px;
      }
      >ul{
        padding: 10px 1px 0px;
        box-sizing: border-box;
        height: 60px;
       
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        position: relative;
        li:nth-child(2){
          margin-left: 80px;
        }
        li:nth-child(3){
          position: absolute;
          left: 30px;
          bottom: 10px;
          >div{
            span:nth-child(1){
            color: #ff4716;
            }
            span:nth-child(2){
              text-decoration: line-through;
              color: gray;
              font-size: 13px;
              
            }
          }
        }
      }
     .top{
       width: 100%;
       height: 50px;
       border-bottom: 2px solid lightgray;
       span:nth-child(1){
        font-weight: bolder;
        font-size: 20px;
        line-height: 50px;
        padding-left: 10px;
       }
       span:nth-child(2){
        margin-left:120px;
        font-weight: bold;
       }
      
     }
   
  }
  .el-main:nth-child(2){
    padding: 0 !important;
    margin-top: 10px;
    background-color: #fff;
    .details{
      >div{
        box-sizing: border-box;
        padding: 5px 10px 2px;
        text-indent: 2em;
        font-size: 20px;
        width: 100%;
        min-height: 120px;
        border-top: 1px solid lightgray;
      }
      >p{
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        &::after{
          content: "";
          display: block;
          width: 80px;
          position: relative;
          margin:  auto;
          border-bottom:3px solid #ff4716;
        }
      }
    }
  }
  .el-footer{
    padding: 0 !important;
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 50px !important;
    ul{
      border-top: 1px solid lightgray;
      display: flex;
      justify-content: space-everly;
      li:nth-child(-n+3){
        width: 55px;
        height: 50px;
        box-sizing: border-box;
        padding-top: 10px;
        >span{
          font-size: 18px;
          display: block;
          text-align: center;
        }
        span:nth-child(2){
          font-size: 17px;
        }
      }
      li:nth-child(n+3){
        >button{
          width: 105px;
          height: 50px;
          border: none;
          color: #f3f3f3;
            background-color: #fcbb14;
        }
      }      
    }
  }
</style>